<template>
  <!-- 新增按钮 -->
  <el-main>
    <!-- <el-button type="success" plain @click="create" class="zengjia">新增学生成绩</el-button> -->
    <el-form>
      <el-button type="primary" class="souan" @click="scoreobscure"
        >搜索</el-button
      >
      <el-input v-model="input" placeholder="请输入内容" class="sou"></el-input>
    </el-form>
    <el-table
      :data="
        tableData.slice(
          (currentPage - 1) * this.pagesize,
          currentPage * this.pagesize
        )
      "
    >
      <el-table-column fixed prop="id" label="#" width="140"> </el-table-column>
      <el-table-column prop="s_name" label="学生姓名" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="score" label="成绩" width="120"> </el-table-column>
      <el-table-column prop="teacher_name" label="教师姓名" width="120">
      </el-table-column>
      <el-table-column prop="s_number" label="学号" width="200">
      </el-table-column>
      <el-table-column prop="caozuo" label="操作">
        <template #default="scope">
          <el-button plain @click="edit(scope.row)">修改</el-button>
          <!-- ↑更改按钮 -->
          <!-- <el-button type="danger" plain @click="doDelete(scope.row.id)"
            >删除</el-button
          > -->
          <!-- ↑删除按钮 -->
        </template>
      </el-table-column>
    </el-table></el-main
  >

  <el-dialog title="个人信息" v-model="dialogFormVisible1">
    <el-form
      :rules="rules"
      :model="form"
      :label-position="labelPosition"
      ref="form"
      class="demo-ruleForm"
    >
      <!-- 修改表单↓ -->
      <el-form-item label="成绩" prop="score">
        <el-input v-model.form="form.score" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate('form')">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pagesizes"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableData.length"
  >
  </el-pagination>
</template>

<script>
import { defineComponent } from "vue";
const axios = require("axios");

export default defineComponent({
  name: "glyxsxx",
  data() {
    return {
      currentPage: 1,
      pagesize:10,
      pagesizes:[10,20,30,40],
      labelPosition: "top",
      tableData: [],
      dialogFormVisible: false, //增加的表单
      dialogFormVisible1: false, //修改的表单
      input: "",
      form: {
        id: "",
        s_name: "",
        subject: "",
        teacher_name: "",
        s_number: "",
        score: "",
        // password: "",
      },
      rules: {
        s_name: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
        ],
        subject: [{ required: true, message: "请输入学科", trigger: "blur" }],
        teacher_name: [
          { required: true, message: "请输入教师姓名", trigger: "blur" },
        ],
        s_number: [{ required: true, message: "请输入学号", trigger: "blur" }],
        score: [{ required: true, message: "请输入成绩", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.testGet();
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    scoreobscure() {
      let _this = this;
      axios
        .get("https://localhost:44386/api/manage/selectscores", {
          params: {
            s: _this.input,
          },
        })
        .then(function (response) {
          // handle success
          _this.tableData = response.data;
        });
    },
    edit(row) {
      this.dialogFormVisible1 = true; //修改的表单
      this.form = row;
    },
    doUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.form.s_year = parseInt(this.form.s_year);
          axios
            .post("https://localhost:44386/api/manage/changeScores", _this.form)
            .then(function (response) {
              if (response.data >= 1) {
                _this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                });
                _this.dialogFormVisible1 = false;
                _this.testGet();
              } else {
                _this.$notify({
                  title: "警告",
                  message: "修改异常",
                  type: "warning",
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    testGet() {
      let _this = this;
      axios
        .get("https://localhost:44386/api/manage/getScores")
        .then(function (response) {
          // handle success
          _this.tableData = response.data;
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
});
</script>

<style >
.souan {
  float: right;
}
.sou {
  width: 200px;
  float: right;
}
.zengjia {
  float: left;
}
header {
  /*header容器，一个template必须只能有一个容器*/
  display: flex; /*弹性布局*/
  height: 100%;
  align-items: center;
  justify-content: space-between; /*不用float浮动布局，采用两边布局*/
}
.l-content {
  /*左边的菜单拉伸按钮*/
  display: flex;
  align-items: center;
}
.l-content .el-button {
  /*面包屑跟 菜单按钮的间距*/
  margin-right: 20px;
}

.r-content .user {
  /*设置图片的大小，以及圆滑度*/
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #fff;
}
.tac {
  text-align: center;
}
.el-menu-vertical-demo {
  width: 200px;
}
.el-container {
  height: 960px;
}
body {
  margin: 0;
  padding: 0;
}
.el-header,
.el-footer {
  background-color: #333333;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 100px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>